import {Button, Card} from "antd";
import styled from "@emotion/styled";
import {LoginForm} from "./LoginForm.tsx";
import {useState} from "react";
import {RegisterForm} from "./RegisterForm.tsx";
import {useDocumentTitle} from "../../hooks/useDocumentTitle.ts";

const Container = styled.div`
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(-180deg, rgb(0, 51, 102) 11.2%, rgb(255, 255, 255) 91.1%);
`;

const ShadowCard = styled(Card)`
  width: 32rem;
  box-shadow: rgba(0, 0, 0, .3) 0 0 5rem .5rem;
  text-align: center;
`

export const FlexLR = styled.div`
  display: flex;
  justify-content: space-between;
`

export default function Index() {
    useDocumentTitle('登录', false)
    const [isLogin, setIsLogin] = useState(true)
    return <Container>
        <ShadowCard>
            <h2>欢迎{isLogin ? '登录' : '注册'}</h2>
            {isLogin ? <LoginForm>
                    <FlexLR>
                        <Button type="link" onClick={() => setIsLogin(false)}>去注册</Button>
                        <Button type="link">忘记密码</Button>
                    </FlexLR>
                </LoginForm> :
                <RegisterForm handleSwitchLogin={() => setIsLogin(true)}>
                    <FlexLR>
                        <Button type="link" onClick={() => setIsLogin(true)}>去登录</Button>
                    </FlexLR>
                </RegisterForm>}
        </ShadowCard>
    </Container>
}